<template>
  <nav class="register_nav flex-jucalic animate__animated animate__fadeInUpBig animate__faster">
    <img src="@/assets/login/logo.png" />
    <span>{{ props.title }}</span>
    <div class="schedule">
      <el-steps direction="vertical" :active="props.step" space="60px" finish-status="success">
        <el-step title="验证您的手机" />
        <el-step title="自我介绍" />
        <el-step title="公式概况" />
        <el-step title="邀请团队成员" />
      </el-steps>
    </div>
  </nav>
</template>

<script setup lang="ts">

const props = defineProps<{ title: string, step: number }>()

</script>

<style lang="scss" scoped>
.register_nav {
  width: 346px;
  height: 100%;
  background-color: #3F8CFF;
  border-radius: 20px;
  position: relative;
  flex-direction: column;
  gap: 50px;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0 40px;
  box-sizing: border-box;

  >img {
    position: absolute;
    width: 50px;
    height: 50px;
    border-radius: 10px;
    top: 100px;
    left: 40px;
  }

  >span {
    font-size: 30px;
    color: white;
    margin-top: 210px;
  }
}
</style>